<template>
  <div class="bread-container">
    <div class="bread self-container">
      <span> 您所在位置： </span>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item
          v-for="item in breadList"
          :key="item.name"
          :to="{ name: item.name !== nowRouteName ? item.name : '' }"
          :class="[item.name !== nowRouteName ? 'yes' : 'active']"
        >
          {{ item.meta.title }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Bread',
  computed: {
    ...mapGetters(['reallyRouteList']),
  },
  data() {
    return {
      breadList: [],
      nowRouteName: '',
    }
  },
  watch: {
    $route(v) {
      // let name = v.name
      console.log('vvvvvvvvvv')
      console.log(v)
      this.breadList = this.readRoutePath(v.fullPath)
      this.nowRouteName = v.name
    },
  },
  beforeRouteEnter(to, from, next) {
    // let name = to.name
    next((vm) => {})
  },
  created() {
    this.nowRouteName = this.$route.name
    this.breadList = this.readRoutePath(this.$route.fullPath)
  },
  methods: {
    readRoutePath(routePath) {
      let pathList = routePath.split('/')
      let resPathList = pathList.filter((item) => {
        return item && isNaN(Number(item))
      })
      let targetRoutes = []
      resPathList.forEach((item) => {
        let routeItem = this.reallyRouteList[item]
        let isCanShow =
          routeItem && !routeItem.breadHidden && item.name !== this.nowRouteName
        if (isCanShow) {
          targetRoutes.push(routeItem)
        }
      })
      return targetRoutes
    },
  },
}
</script>

<style lang="scss" scoped>
.bread-container {
  width: 100%;
  height: 69px;
  // background: #eef5ff;

  .bread {
    display: flex;
    align-items: center;
    margin: auto;
    padding: 25px 0;
    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
    font-size: 14px;
    font-weight: 400;
  }
}
.el-breadcrumb__item {
  color: #666;

  ::v-deep .el-breadcrumb__inner {
    font-weight: 400;
    color: #666;
  }
}
.active {
  ::v-deep .el-breadcrumb__inner {
    color: #2a65ff;
    font-weight: 400;
    text-align: left;
  }
}
</style>
